<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>竞品分析</title>
	<link rel="stylesheet" href="../css/common.css">
</head>
<body>
<div class="main-wrapper" style="padding: 15px 0;">
		<div class="main-container">
			<div style="width: 1160px;">
				<div class="main-chart-block">
	    			<div class="main-chart-block-header">
	    				<span class="main-chart-block-title">竞品分析</span>
	    			</div>
	    			<div class="main-chart-block-body">
	    				<div class="main-chart-block-body-content">
	    					<table class="main-table" style="width: auto; margin: 0 auto 15px;" id="table">
		    					<thead>
		    						<th width="180">项目</th>
		    						<th width="120">美的</th>
		    						<th width="120">格力</th>
		    					</thead>
		    					<tbody id="tbody"></tbody>
		    				</table>
		    				<ul id="paginationList" style="width: 0; height: 0; margin: 0; padding: 0;"></ul>
		    				<div class="main-pagination">
		    					<div class="main-pagination-info">
		    						<span id="mainPaginationTotal"></span>条评论，共<span id="mainPaginationTotalPage"></span>页，每页显示<span id="mainPaginationSize"></span>条
		    					</div>
		    					<div class="main-pagination-container"></div>
		    				</div>
		    			</div>
		    		</div>
		    	</div>
		    </div>
		</div>
	</div>
</div>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jPages/js/jPages.min.js"></script>
<script type="text/javascript">
	function init() {
    	var list = [
    		{id: 1, item1: '111', item2: '222'},
    		{id: 2, item1: '111', item2: '222'},
    		{id: 3, item1: '111', item2: '222'},
    		{id: 4, item1: '111', item2: '222'},
    		{id: 5, item1: '111', item2: '222'},
    	]
    	var curPage = 1;
    	var total = 303;
    	var size = 5;
    	// ul
		var $ul = $('#paginationList');
		var ulStr = '';
		for (var i = 0; i < total; i++) {
			ulStr += '<li></li>';
		}
		$ul.html(ulStr);
		$('#mainPaginationTotal').html(total);
		$('#mainPaginationTotalPage').html(Math.ceil(total / size));
		$('#mainPaginationSize').html(size);

		$('.main-pagination-container').jPages({
			containerID: "paginationList",
			previous: "上一页",
			next: "下一页",
			startPage: 1,
			perPage: size,
			jump: true,
			callback: function(pages) {
				var current = pages.current;
				jumpPage(current);
			}
		});
		function jumpPage(current) {
	    	setTimeout(function() {
	    		// table
		    	var $container = $('#table');
		    	var list = [
		    		{id: Math.random(), item1: '111', item2: '222'},
		    		{id: 7, item1: '111', item2: '222'},
		    		{id: 8, item1: '111', item2: '222'},
		    		{id: 9, item1: '111', item2: '222'},
		    		{id: 10, item1: '111', item2: '222'},
		    	]
		    	var str = '';
		    	list.forEach(function(item) {
					str += '<tr>';
					str += '<td>'+ item.id +'</td>';
					str += '<td>'+ item.item1 +'</td>';
					str += '<td>'+ item.item2 +'</td>';
			    	str += '</tr>';
				});
				$container.find(tbody).html(str);
	    	}, 200);
	    }
	}
    $(function() {
    	init();
    })
</script>